<template>
  <view class="product-page">
    <!-- 搜索栏 -->
    <view class="search-bar">
      <!-- <nut-searchbar placeholder="搜索商品"></nut-searchbar> -->
      <myInput v-model="searchTxt" @search="handleSearch" />
    </view>

    <!-- 分类标签 -->
    <view class="category-tabs">
      <nut-tabs v-model="activeTab" title-scroll title-gutter="10">
        <nut-tab-pane :title="cate.name" v-for="cate in cates" :key="cate.id">
          <view class="product-grid">
            <orderItem :item="itemObj"></orderItem>
            <view
              class="product-item"
              v-for="item in products"
              :key="item.id"
              @click="goToDetail(item.id)"
            >
              <view class="product-info">
                <text class="product-title">{{ item.id }}</text>
                <view class="price-row">
                  <text class="price">¥{{ item.price }}</text>
                </view>
              </view>
            </view>
          </view>
        </nut-tab-pane>
        <!-- <nut-tab-pane title="白酒"></nut-tab-pane>
          <nut-tab-pane title="果酒"></nut-tab-pane>
          <nut-tab-pane title="礼盒"></nut-tab-pane> -->
      </nut-tabs>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
import Taro from "@tarojs/taro";
const pic = "https://cdn.tjkximg.com/content/zhangtang/images/mtjx.jpg";
import myInput from "@/components/my-input/index.vue";
import http from "@/utils/http";
import orderItem from "./components/order-item.vue";

const itemObj = ref({
  statusTag: "已发货",
  statusText: "待完成",
  time: "2023-10-01 14:30",
  price: "199.00",
  startAddress: "北京市海淀区中关村",
  isStartAddressActive: true,
  endAddress: "上海市浦东新区陆家嘴",
  isEndAddressActive: false,
  orderNumber: "1234567890",
});

Taro.setNavigationBarTitle({
  title: "订单列表",
});

const searchTxt = ref("");
const cates = ref([
  {
    id: 0,
    name: "全部",
  },
  {
    id: 1,
    name: "待接单",
  },
  {
    id: 2,
    name: "待勘查",
  },
  {
    id: 3,
    name: "已勘查",
  },
  {
    id: 4,
    name: "施工中",
  },
  {
    id: 5,
    name: "已完工",
  },
  {
    id: 6,
    name: "已完成",
  },
  {
    id: 7,
    name: "已关闭",
  },
]);

onMounted(() => {
  console.log("searchTxt", searchTxt.value);
  http.postQuery(`/api/merchant/getOrder`, {}).then((res) => {
    console.log("res", res);
  });
});
function handleSearch() {
  console.log("searchTxt", searchTxt.value);
}

interface Product {
  id: number;
  name: string;
  desc: string;
  price: number;
  sold: number;
  image: string;
}

const activeTab = ref(0);
const products = ref<Product[]>(
  [1, 2, 3, 4, 5, 6, 7, 8].map((i) => {
    return {
      id: i,
      name: `醉义堂20年窖藏酒商品${i}`,
      desc: `商品${i}的描述纯粮酿醉义堂20年窖藏酒醉义堂20年窖藏酒香型白酒`,
      price: Math.floor(Math.random() * 1000),
      sold: Math.floor(Math.random() * 1000),
      image: pic,
    };
  })
);

function goToDetail(id: number) {
  Taro.navigateTo({
    url: `/pages-detail/order/detail?id=${id}`,
  });
}
</script>

<style lang="scss">
.product-page {
  padding-bottom: 200rpx;
  background-color: #f5f5f5;

  .search-bar {
    padding: 20rpx;
    background-color: #fff;
  }

  .category-tabs {
    background-color: #fff;
    margin-bottom: 20rpx;
  }

  .product-grid {
    display: flex;
    flex-wrap: wrap;
    padding: 0 10rpx;
    box-sizing: border-box;

    .product-item {
      width: 100%;
      padding: 10rpx;
      box-sizing: border-box;

      .product-image {
        width: 100%;
        height: 350rpx;
        border-radius: 16rpx 16rpx 0 0;
      }

      .product-info {
        background-color: #fff;
        padding: 20rpx;
        border-radius: 0 0 16rpx 16rpx;

        .product-title {
          font-size: 28rpx;
          font-weight: 500;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
          line-height: 40rpx;
        }

        .product-desc {
          font-size: 24rpx;
          color: #999;
          margin: 10rpx 0;
          display: block;
          line-height: 34rpx;
        }

        .price-row {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 16rpx;

          .price {
            color: #f2270c;
            font-weight: 500;
            font-size: 32rpx;
          }

          .sold {
            font-size: 24rpx;
            color: #999;
          }
        }
      }
    }
  }
}
.nut-tab-pane {
  padding: 12rpx;
}
</style>
